<template>
    <div>
<!--        相关操作-->
        <div class="buttonCardLayout">
            <el-card class="box-card">
                <div style="display: inline-block;width: 100%">
<!--                批量删除-->
                    <el-button type="primary" class="batchDeleteButton"  @click="batchDeleteBlog">批量删除</el-button>
<!--                新增博客-->
                    <el-button type="primary" class="addButton" @click="dialogVisible=true,dialogTitle='新增博客信息'">新增</el-button>
<!--                查询博客-->
                    <el-input
                            class="queryInput"
                            placeholder="请输入查询标题内容"
                            prefix-icon="el-icon-search"
                            @blur="queryByCondition"
                            v-model="queryTitleLike">
                    </el-input>
                </div>

            </el-card>
        </div>
<!--        表格内容-->
        <div class="tableCardLayout" >
            <el-card class="box-card">
                <el-table
                        :data="blogData"
                        :highlight-selection-row="true"
                        @selection-change="changeSelectedIds"
                        height="568"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            prop="userId"
                            label="发布人">
                    </el-table-column>
                    <el-table-column
                            label="是否允许评论">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.allowComment"
                                    @change="changeAllowComment(scope.row)"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </template>

                    </el-table-column>
                    <el-table-column
                            label="发布时间">
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFormatFun(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作" >
                        <template slot-scope="scope">
                            <el-button type="primary" @click="viewBlogData(scope.row.id)">查看</el-button>
                            <el-button type="warning" @click="updateBlogData(scope.row)">编辑</el-button>
                            <el-button type="danger"  @click="deleteBlogData(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </div>

<!--        分页设置-->
        <div class="pageCardStyle">
            <el-card class="box-card">
                <el-pagination
                        @size-change="changePageSize"
                        @current-change="changePageIndex"
                        :page-sizes="[8, 16, 24, 32]"
                        :page-size="8"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalBlogNum">
                </el-pagination>
            </el-card>
        </div>

<!--        新增博客弹出框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="60%"
                @close="closeDialog"
                :fullscreen="dialogFull"
                :show-close="false"
                center>
            <template slot="title">

                <el-row style="width: 100%">
                    <el-col :span="8">
                          &nbsp;
                    </el-col>
<!--                    标题显示-->
                    <el-col :span="8" style="text-align: center;font-size: 20px">
                        <span>{{dialogTitle}}</span>
                    </el-col>
                    <el-col :span="8">
                        <div class="dialog_title">
                            <!--                    全屏按钮-->
                            <div class="dialog_title_icon" @click="dialogFull? dialogFull=false: dialogFull=true">
                                <i class="el-icon-full-screen"></i>
                            </div>
                            <!--                    关闭按钮-->
                            <div class="dialog_title_icon" @click="dialogVisible=false">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </template>


            <!--            输入博客内容-->
            <div v-if="dialogTitle=='新增博客信息'">
<!--                输入博客附属信息-->
                <div>
                    <el-card class="box-card">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input
                                        placeholder="请输入博客标题"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogBlogInfo.title">
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input
                                        prefix-icon="el-icon-s-custom"
                                        :disabled="true"
                                        v-model="dialogBlogInfo.userId">
                                </el-input>
                            </el-col>
                            <el-col :span="6" class="allowCommentStyle">
                                <el-switch
                                        v-model="dialogBlogInfo.allowComment"

                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        :active-value="1"
                                        :inactive-value="0"
                                        active-text="允许评论"
                                        inactive-text="禁止评论">
                                </el-switch>
                            </el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                        </el-row>

                    </el-card>
                </div>
<!--                输入博客主体-->
                <div class="blogContentStyle">
                    <mavon-editor ref="md"
                                  @fullScreen="upfateFullScreenStatus"
                                  v-model="dialogBlogInfo.content"
                                  :ishljs="true"
                                  @imgAdd="imgAdd"
                                  class="mavonEditorDialog"/>
                </div>
<!--                底部栏-->
                <div>
                    <el-card class="box-card" style="text-align: center">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addBlog">确 定</el-button>
                    </el-card>

                </div>

            </div>

<!--            编辑博客内容-->
            <div v-else-if="dialogTitle=='编辑博客信息'">
                <!--                编辑博客附属信息-->
                <div>
                    <el-card class="box-card">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input
                                        placeholder="请输入博客标题"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogBlogInfo.title">
                                </el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input
                                        prefix-icon="el-icon-s-custom"
                                        :disabled="true"
                                        v-model="dialogBlogInfo.userId">
                                </el-input>
                            </el-col>
                            <el-col :span="6" class="allowCommentStyle">
                                <el-switch
                                        v-model="dialogBlogInfo.allowComment"

                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        :active-value="1"
                                        :inactive-value="0"
                                        active-text="允许评论"
                                        inactive-text="禁止评论">
                                </el-switch>
                            </el-col>
                            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                        </el-row>
                    </el-card>
                </div>
                <!--                编辑博客主体-->
                <div class="blogContentStyle">
                    <mavon-editor ref="md"
                                  v-model="dialogBlogInfo.content"
                                  @fullScreen="upfateFullScreenStatus"
                                  :ishljs="true"
                                  @imgAdd="imgAdd"
                                  class="mavonEditorDialog"/>
                </div>
                <!--                底部栏-->
                <div>
                    <el-card class="box-card" style="text-align: center">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateBlog">确 定</el-button>
                    </el-card>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'          //引入markdown编辑器
    import 'mavon-editor/dist/css/index.css'            //引入markdown编辑器相关样式
    import axios from 'axios'                           //引入axios
    import {constants} from "@/common/constants";       //引入常量

    export default {
        name: "BlogComponent",
        components:{
            mavonEditor,
        },
        data() {
            return {
                blogData: [],                   //所有的博客信息
                dialogVisible: false,           //新增博客弹出框是否展示
                dialogBlogInfo:{allowComment:1,userId:1},                    //新增的博客对象
                dialogTitle:"",                 //根据dialog标题显示dialog内容
                dialogFull:false,               //dialog是否全屏显示
                selectedIds:[],                 //目前选中的id集合
                pageIndex:1,                    //第xx页
                pageSize:8,                     //页面大小
                totalBlogNum: 0,                //博客总的数目
                queryTitleLike:"",             //按照标题模糊查询
            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("博客管理"));
            this.queryAllBlogs();
        },
        methods:{
            //查询所有的博客信息
            queryAllBlogs(){
                this.request.get("/index/blog/queryAllBlogs",{
                    params:{
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        queryTitleLike: this.queryTitleLike,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.blogData=res.data.blogs;
                        this.totalBlogNum=res.data.totalBlogNum;
                    }else if(res.code=="301"){
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //上传博客内容中需要添加的博客图片
            imgAdd(pos, $file) {
                let $vm = this.$refs.md;
                // 第一步.将图片上传到服务器.
                const formData = new FormData();
                formData.append('file', $file);
                axios({
                    url: 'http://'+constants.server+':'+constants.port+'/index/attach/upload',
                    method: 'post',
                    data: formData,
                    headers: {'Content-Type': 'multipart/form-data'},
                }).then(res => {
                    if (res.data.code=='200'){
                        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
                        /**
                         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
                         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，
                         * `$vm`为`mavonEditor`
                         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，
                         * `$vm`为 `this.$refs.md`
                         */
                        $vm.$img2Url(pos, res.data.data);
                        this.$message({
                            message: "上传成功",
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: "上传图片失败",
                            type: 'error'
                        });
                    }

                });
            },
            //关闭新增博客弹出框触发的事件
            closeDialog(){
                this.initDialogState();
            },
            //初始化博客弹出框
            initDialogState(){
                this.dialogBlogInfo={allowComment:1,userId:1};
            },
            //新增博客信息
            addBlog(){
                this.request.post("/index/blog/addBlog",this.dialogBlogInfo).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllBlogs();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
                this.dialogVisible=false;
            },
            //编辑博客信息
            updateBlog(){
                this.request.post("/index/blog/updateBlog",this.dialogBlogInfo).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllBlogs();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
                this.dialogVisible=false;
            },
            //查看博客内容
            viewBlogData(id){
                this.$router.push("/frontFramework/blogView?id="+id);
            },
            //编辑博客内容
            updateBlogData(blogData){
                this.dialogTitle="编辑博客信息";
                this.dialogBlogInfo=blogData;
                this.dialogVisible=true;
            },
            //删除博客
            deleteBlogData(blogData){
                this.request.post("/index/blog/deleteBlog",blogData).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllBlogs();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变滑块触发的事件
            changeAllowComment(blogData){
                this.$confirm('确定改变该博客的评论状态吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    blogData.allowComment=(blogData.allowComment==1)?1:0;
                    this.request.post("/index/blog/updateBlog",blogData).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                        this.queryAllBlogs();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                    this.queryAllBlogs();
                });
            },
            //批量删除博客
            batchDeleteBlog(){
                this.request.post("/index/blog/batchDeleteBlog",this.selectedIds).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllBlogs();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变选中的行时调用的方法
            changeSelectedIds(ids){
                this.selectedIds=ids.map(v =>v.id)
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllBlogs();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllBlogs();
            },
            //条件模糊查询博客
            queryByCondition(){
                this.queryAllBlogs();
            },
            //mavonEditor切换全局编辑触发的事件
            upfateFullScreenStatus(status,value){
                console.log(status);
                console.log(value);
                if (status){
                    document.getElementsByClassName("mavonEditorDialog")[0].style.maxHeight="100%";
                    document.getElementsByClassName("mavonEditorDialog")[0].style.minHeight="100%";
                }else{
                    document.getElementsByClassName("mavonEditorDialog")[0].style.maxHeight="400px";
                    document.getElementsByClassName("mavonEditorDialog")[0].style.minHeight="400px";
                }



            }
        }
    }
</script>

<style scoped>
    .buttonCardLayout{
        padding:  10px;


    }

    .dialog_title{
        text-align: right;
    }

    .dialog_title_icon{
        display: inline-block;
        margin: 0px 5px;
        cursor: pointer;
        pointer-events: auto;
    }

    .blogContentStyle{
        padding: 10px 0px ;
    }

    .tableCardLayout{
        padding:  0px 10px 10px 10px;
    }

    .pageCardStyle{
        padding:  0px 10px 10px 10px;
        text-align: center;
    }

    .allowCommentStyle{
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
        font-size: 20px;
    }

    .addButton{
        width: 100px;
        border-radius: 10px;
        background: #63b0f4c2;
        border-color: #B5D0EC;
        margin-right: 10px;
        margin-left: 0px;
    }

    .batchDeleteButton{
        width: 100px;
        border-radius: 10px;
        background: rgba(232, 87, 108, 0.47);
        border-color: #d08dba5c;
        margin-right: 10px;
    }

    .queryInput{
        display: inline-block;
        width: 250px;
        margin-right: 10px;
    }

    .mavonEditorDialog{
        max-height: 400px;
        min-height: 400px;
    }




</style>
